<template>
  <el-row class="page-layout">
    <el-col :span="12" style="margin-top: 1vh">
      <el-container style="margin-top: -20px">
        <el-main>
          <el-card shadow="hover">
            <div class="tcm-viz-left-card-process">
              <div class="process-with-title" @click="prodVizProcessClick('A')">
                <div class="process-title">
                  <span>A班</span>
                </div>
                <el-progress type="dashboard" :percentage="20" :color="colors" />
              </div>
              <div class="process-with-title" @click="prodVizProcessClick('B')">
                <div class="process-title">
                  <span>B班</span>
                </div>
                <el-progress type="dashboard" :percentage="40" :color="colors" />
              </div>
              <div class="process-with-title" @click="prodVizProcessClick('C')">
                <div class="process-title">
                  <span>C班</span>
                </div>
                <el-progress type="dashboard" :percentage="60" :color="colors" />
              </div>
              <div class="process-with-title" @click="prodVizProcessClick('D')">
                <div class="process-title">
                  <span>D班</span>
                </div>
                <el-progress type="dashboard" :percentage="80" :color="colors" />
              </div>
            </div>
            <div>
              <el-divider />
              <div class="tcm-viz-left-card-graph">
                <div class="tcm-viz-left-card-radio">
                  <el-radio-group v-model="radio" text-color="#626aef" fill="rgb(239, 240, 253)" @change="getCrewAchi">
                    <el-radio-button label="日" value="day" />
                    <el-radio-button label="月" value="month" />
                  </el-radio-group>
                </div>
                <graph-bar-line
                  :data-bar-real="prodVizDataReal"
                  :data-bar-set="prodVizDataSet"
                  :data-line="prodVizDataLine"
                  :datax="prodVizDatax"
                  :title="currentProdVizProcess + '班'"
                  :data-name="['目标', '实际', '达成率']"
                  :y-axis-nmae="['产量', '达成率']"
                />
              </div>
            </div>
          </el-card>
        </el-main>
        <el-footer style="height: 35vh">
          <el-card shadow="hover">
            <div class="tcm-viz-left-foot-graph">
              <graph-bar-line
                :data-bar-real="CapUtilRateReal"
                :data-bar-set="CapUtilRateSet"
                :data-line="CapUtilRateLine"
                :datax="CapUtilRateDatax"
                :title="'酸轧机组月产能利用率'"
                :data-name="['目标', '实际', '利用率']"
                :y-axis-nmae="['产量', '利用率']"
              />
            </div>
          </el-card>
        </el-footer>
      </el-container>
    </el-col>
    <el-col :span="12">
      <el-container>
        <el-header style="height: 22vh">
          <div class="tcm-viz-right-header-div common-div-card">
            <div :style="`width: ${percent1}%; background-color: ${colors[0].color}`" class="div-color-title">
              <span>生产：174分钟</span>
            </div>
            <div :style="`width: ${percent2}%; background-color: ${colors[1].color}`" class="div-color-title">
              <span>机械：458分钟</span>
            </div>
            <div :style="`width: ${percent3}%; background-color: ${colors[2].color}`" class="div-color-title">
              <span>其他：35分钟</span>
            </div>
          </div>
          <div class="tcm-viz-right-table-div common-div-card">
            <el-table
              :data="tcmVizTableData1"
              :stripe="true"
              v-loading="tableLoading"
              :header-cell-style="{ background: '#eef1f6', color: '#606266', textAlign: 'center' }"
              :cell-style="{ textAlign: 'center' }"
            >
              <el-table-column prop="timeRange" label="时间段" :show-overflow-tooltip="true" />
              <el-table-column prop="duration" label="持续时间" :show-overflow-tooltip="true" />
              <el-table-column prop="type" label="类型" :show-overflow-tooltip="true" />
              <el-table-column prop="description" label="描述" :show-overflow-tooltip="true" />
            </el-table>
          </div>
        </el-header>
        <el-main>
          <div class="tcm-viz-right-graph-div common-div-card">
            <graph-bar-other
              :data1="keyVarietiesProdData1"
              :data2="keyVarietiesProdData2"
              :data3="keyVarietiesProdData3"
              :data4="keyVarietiesProdData4"
              :data-name="keyVarietiesProdName"
              :datax="keyVarietiesProdx"
              :title="'当月重点品种生产情况'"
              :min="0"
              :max="3500"
            ></graph-bar-other>
          </div>
        </el-main>
        <el-footer>
          <div class="tcm-viz-right-footer-table-div common-div-card">
            <el-table
              :data="tcmVizTableData2"
              :stripe="true"
              v-loading="tableLoading"
              :header-cell-style="{ background: '#eef1f6', color: '#606266', textAlign: 'center' }"
              :cell-style="{ textAlign: 'center' }"
            >
              <el-table-column prop="problem" label="问题描述" :show-overflow-tooltip="true" />
              <el-table-column prop="liableParty" label="责任方" :show-overflow-tooltip="true" />
              <el-table-column prop="reason" label="原因" :show-overflow-tooltip="true" />
              <el-table-column prop="status" label="完成状态" :show-overflow-tooltip="true" />
            </el-table>
          </div>
        </el-footer>
      </el-container>
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
  import { ref, reactive, onMounted, onUnmounted, nextTick, defineComponent } from 'vue';
  import GraphBarLine from '../components/GraphBarLine.vue';
  import GraphBarOther from '../components/GraphBarOther.vue';
  import { prodAnalysisVizApi } from '/@/api/report/TCM2208MillUnit/index';

  const colors = [
    { color: '#f56c6c', percentage: 20 },
    { color: '#e6a23c', percentage: 40 },
    { color: '#5cb87a', percentage: 60 },
    { color: '#1989fa', percentage: 80 },
    { color: '#6f7ad3', percentage: 100 },
  ];

  const radio = ref('day');
  const tableLoading = ref(false);
  const currentProdVizProcess = ref('A');

  const prodVizDataReal = ref([]); //8045, 7905, 7754, 6450, 4658, 7854, 7663
  const prodVizDataSet = ref([]); // 7465, 7546, 7892, 7124, 7446, 6975, 7005
  const prodVizDataLine = ref<any>([]); //108, 105, 98, 91, 63, 113, 109
  const prodVizDatax = ref([]); // '5/1', '5/2', '5/3', '5/4', '5/5', '5/6', '5/7'

  const CapUtilRateReal = ref([]); //8045, 7905, 7754, 6450, 4658, 7854, 7663
  const CapUtilRateSet = ref([]); // 7465, 7546, 7892, 7124, 7446, 6975, 7005
  const CapUtilRateLine = ref<any>([]); //108, 105, 98, 91, 63, 113, 109
  const CapUtilRateDatax = ref([]); // '5/1', '5/2', '5/3', '5/4', '5/5', '5/6', '5/7'

  const tcmVizTableData1 = ref([
    { timeRange: '17:20-17:25', duration: '5', type: '降速', description: '原料窄尺导致出口重新挖边' },
    { timeRange: '18:50-20:20', duration: '90', type: '停机', description: '轧机1,2号步进梁行走故障' },
  ]);
  const tcmVizTableData2 = ref([
    { problem: '轧机3,4号步进梁故障', liableParty: '设备', reason: '1,2号步进梁轴承损坏用3,4号步进梁替代', status: '未完成' },
  ]);

  // 高强钢
  const keyVarietiesProdData1 = ref([]); //2000, 2000, 2000, 2000
  // 宽料
  const keyVarietiesProdData2 = ref([]); //1250, 1250, 1250, 1250
  // 薄料
  const keyVarietiesProdData3 = ref([]); //490, 490, 490, 490
  // 外板
  const keyVarietiesProdData4 = ref([]); //3200, 3200, 3200, 3200
  const keyVarietiesProdName = ref(['高强钢(780以上)', '宽料(1800以上)', '薄料(0.6以下)', '外板']);
  const keyVarietiesProdx = ref([]); //'甲', '乙', '丙', '丁'

  const divColors = (val1: number, val2: number, val3: number) => {
    const total = val1 + val2 + val3;
    let percent1 = Math.floor((val1 / total) * 100);
    let percent2 = Math.floor((val2 / total) * 100);
    let percent3 = 100 - percent1 - percent2; // 确保总和为100%

    // 确保每个百分比至少为20%
    if (percent1 < 20) {
      percent1 = 20;
      percent2 += Math.floor((20 - percent1) / 2);
      percent3 += Math.floor((20 - percent1) / 2);
      percent3 += (20 - percent1) % 2; // 处理剩余的1%，如果有的话
    }
    if (percent2 < 20) {
      percent2 = 20;
      percent1 += Math.floor((20 - percent2) / 2);
      percent3 += Math.floor((20 - percent2) / 2);
      percent3 += (20 - percent2) % 2; // 处理剩余的1%，如果有的话
    }
    if (percent3 < 20) {
      percent3 = 20;
      percent1 += Math.floor((20 - percent3) / 2);
      percent2 += Math.floor((20 - percent3) / 2);
      percent1 += (20 - percent3) % 2; // 处理剩余的1%，如果有的话
    }

    // 调整百分比总和为100%
    const sum = percent1 + percent2 + percent3;
    if (sum > 100) {
      const excess = sum - 100;
      percent1 = Math.max(percent1 - excess, 20);
      percent2 = Math.max(percent2 - excess, 20);
      percent3 = Math.max(percent3 - excess, 20);

      if (percent1 + percent2 + percent3 > 100) {
        const excess = sum - 100;
        percent1 = Math.max(percent1 - excess, 20);
        percent2 = Math.max(percent2 - excess, 20);
        percent3 = Math.max(percent3 - excess, 20);
      } else {
        // 处理剩余
        const other = 100 - percent1 - percent2 - percent3;
        if (percent1 > percent2) {
          percent1 > percent3 ? (percent1 += other) : (percent3 += other);
        } else {
          percent2 > percent3 ? (percent2 += other) : (percent3 += other);
        }
      }
    }

    return { percent1, percent2, percent3 };
  };

  const prodVizProcessClick = (process: string) => {
    currentProdVizProcess.value = process;
    getCrewAchi();
  };

  const { percent1, percent2, percent3 } = divColors(174, 458, 35);

  // ------------------------------------------ 数据对接 ---------------------------------------------

  // 班组目标达成情况
  const getCrewAchi = async () => {
    try {
      const param = {
        dateType: radio.value,
        crew: currentProdVizProcess.value,
      };
      const res = await prodAnalysisVizApi.findCrewAchiData(param);
      prodVizDataReal.value = res.data.data.actual;
      prodVizDataSet.value = res.data.data.target;
      prodVizDataLine.value = res.data.data.achi.map((item: any) => (item * 100).toFixed(2));
      prodVizDatax.value = res.data.data.category;
    } catch (error) {
      prodVizDataReal.value = [];
      prodVizDataSet.value = [];
      prodVizDataLine.value = [];
      prodVizDatax.value = [];
      console.error(`获取班组目标达成情况数据失败: `, error);
      ElMessage.error(`获取班组目标达成情况数据失败 `);
    }
  };

  // 重点品种生产情况
  const getImpData = async () => {
    try {
      const res = await prodAnalysisVizApi.findImpData();
      keyVarietiesProdData1.value = res.data.data.gaoqiang;
      keyVarietiesProdData2.value = res.data.data.kuanliao;
      keyVarietiesProdData3.value = res.data.data.boliao;
      keyVarietiesProdData4.value = res.data.data.waiban;
      keyVarietiesProdx.value = res.data.data.category;
    } catch (error) {
      console.error(`获取重点品种生产情况数据失败: `, error);
      ElMessage.error(`获取重点品种生产情况数据失败 `);
    }
  };

  // 酸轧机组月产能利用率
  const getUtiData = async () => {
    try {
      const res = await prodAnalysisVizApi.findUtiData();
      CapUtilRateReal.value = res.data.data.actual;
      CapUtilRateSet.value = res.data.data.target;
      CapUtilRateLine.value = res.data.data.achi.map((item: any) => (item * 100).toFixed(2));
      CapUtilRateDatax.value = res.data.data.category;
    } catch (error) {
      console.error(`获取酸轧机组月产能利用率数据失败: `, error);
      ElMessage.error(`获取酸轧机组月产能利用率数据失败 `);
    }
  };

  onMounted(() => {
    getCrewAchi();
    getImpData();
    getUtiData();
  });

  onUnmounted(() => {
    tableLoading.value = false;
  });
</script>
<style lang="less" scoped>
  @border-radius: 8px;
  @primary-color: #2c69e8;
  @box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  @box-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.12);
  @border:1px solid #dcdfe6;

  .page-layout {
    background-color: #fff;
  }

  .common-div-card {
    box-shadow: @box-shadow;
    transition: 0.3s;
    border-radius: @border-radius;
    border: @border;

    // 悬停状态
    &:hover {
      box-shadow: @box-shadow-hover;
    }
  }

  .tcm-viz-left-card-process {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 10px;
    width: 100%;

    .process-with-title {
      display: flex;
      flex-direction: column;

      .process-title {
        font-size: large;
        text-align: center;
        margin-bottom: 1vh;
      }
    }
  }

  .tcm-viz-left-card-radio {
    display: flex;
    justify-content: flex-end;
  }

  .tcm-viz-left-card-graph {
    width: 100%;
    height: 40vh;

    .chart-container {
      margin-top: -2vh;
    }
  }

  .tcm-viz-left-foot-graph {
    width: 100%;
    height: 30vh;
  }

  .tcm-viz-right-header-div {
    display: flex;
    flex-wrap: nowrap;
    height: 4vh;
    width: 100%;
    border: 1px solid #ebeef5;
    overflow: hidden;
  }

  .div-color-title {
    height: 100%;
    display: flex;
    text-align: center;
    align-items: center;
    color: #fff;
    justify-content: center;
  }

  .tcm-viz-right-table-div {
    width: 100%;
    margin-top: 1vh;
    min-height: 18vh;
    :deep(.el-table) {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  }

  .tcm-viz-right-graph-div {
    width: 100%;
    height: 45vh;
  }

  .tcm-viz-right-footer-table-div {
    width: 100%;
    min-height: 34vh;
    :deep(.el-table) {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  }
</style>
